<template>
  <div>
    <button @click="comName='MyLeft'">展示Left</button>
    <button @click="comName='MyRight'">展示Right</button>
    <!-- 给组件套一层 keep-alive，可以保持组件不被销毁，从而可以保持组件的状态 -->
    <!-- include="MyLeft,MyRight" 表示那些组件需要报纸状态，不指定就不会被缓存了 -->
    <!-- exclude="MyLeft,MyRight" 表示那些组件不需要报纸状态，不指定就会被缓存 -->
    <!-- 动态组件，使用 component 标签， 关键是 :is 属性，属性值是组件名 -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>   
    
  </div>
</template>

<script>
import MyLeft from '@/components/MyLeft.vue'
import MyRight from '@/components/MyRight.vue'
export default {
  data () {
    return {
      comName:'MyLeft'
    }
  },
  components:{
    MyLeft,
    MyRight
  }

}
</script>

<style>

</style>